<template>
    <div class="w-full flex justify-center">
        <div class="2xl:w-3/5 xl:w-4/5 md:full px-3">
            <div class="text-3xl flex justify-center w-full">404 NOT FOUND!!!</div>
            <swiper :pagination="{'dynamicBullets': true}"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            >
                <swiper-slide v-for="(item, index) in state.home.products.items" :key="index">
                  <ProductItems :image="item.image" :contents="item.contents" />
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script  lang="ts" setup >
import { state } from "@utils/store";
import ProductItems from '@comps/smallComs/productItems.vue';
import { reactive } from "@vue/reactivity";
const data:any = reactive({
    swiper: null
})

function onSwiper(swiper:any) {
    data.swiper = swiper
}

function onSlideChange() {
    console.log(data.swiper.realIndex)
}


</script>